<template>
  <div class="app-container">
    <el-row class="row bg-white">
      <el-select  size="small" style="width: 230px;" @change="handlePlanChange" v-model="listQuery.ad_id" filterable placeholder="选择推广计划">
        <el-option v-for="item in  planOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-button class="el-f-r green-btn" v-if="btnAdAdd" type="primary" size="small" style="width: 120px" @click="handleCreateAd">新建广告</el-button>
    </el-row>
    <panel-group :statistical_data="todayData"></panel-group>
    <el-row class="row bg-white">
      <div class="chart-filter">
        <el-select name="lineChartTime" style="width: 130px" v-model="lineTime" @change="handleLineTimeChange" placeholder="时间">
          <el-option v-for="item in  options" :key="item.key" :label="item.display_name" :value="item.key">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="line_chart_pick_date"
          :editable="false"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="handlelineChartDatePickChange">
        </el-date-picker>
      </div>
      <line-chart :chart-data="lineChartData"></line-chart>
    </el-row>

    <el-row class="row bg-white">
      <div class="chart-filter">
        <el-select name="pieChartTime" style="width: 130px" v-model="pieTime" @change="handlePieTimeChange" placeholder="时间">
          <el-option v-for="item in options" :key="item.key" :label="item.display_name" :value="item.key">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="pie_chart_pick_date"
          :editable="false"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="handlePieChartDatePickChange">
        </el-date-picker>
      </div>
      <div class="chart-wrapper">
        <bar-chart :bar-data="barChartData"></bar-chart>
      </div>
    </el-row>
    <el-row class="row bg-white">
      <div class="chart-filter">
        <el-select  name="tableTime" style="width: 130px" v-model="tableTime" @change="handleTableTimeChange" placeholder="时间">
          <el-option v-for="item in options" :key="item.key" :label="item.display_name" :value="item.key">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="table_pick_date"
          :editable="false"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          @change="handleTableDatePickChange">
        </el-date-picker>
      </div>
      <el-table :data="list"  element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label='时间' >
          <template slot-scope="scope">
            {{scope.row.d_date}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="曝光次数">
          <template slot-scope="scope">
            {{scope.row.pv}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="点击数">
          <template slot-scope="scope">
            <span>{{scope.row.click_count}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="花费">
          <template slot-scope="scope">
            <span>{{scope.row.click_rate}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="ad_type==1" align="center" label="关注">
          <template slot-scope="scope">
            <span>{{scope.row.attend_count}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="ad_type==1"  align="center" label="取消关注">
          <template slot-scope="scope">
            <span>{{scope.row.unattend_count}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

  </div>
</template>

<script>
  import PanelGroup from './components/PanelGroup'
  import LineChart from './components/LineChart'
  import BarChart from './components/BarChart'
  import { parseTime, in_array } from '@/utils/index'
  import { getList } from '@/api/advertsing'
  import { getTodayData, getLineChartData, getBarChartData } from '@/api/'
  export default {
    name: 'home',
    components: {
      PanelGroup,
      LineChart,
      BarChart
    },
    data() {
      return {
        list: [],
        planOptions: [],
        todayData: [],
        lineChartData: {
          xData: []
        },
        barChartData: {
          xData: [],
          yData: []
        },
        options: [
          { key: '7', display_name: '最近7天' },
          { key: '15', display_name: '最近15天' },
          { key: '30', display_name: '最近30天' }
        ],
        lineTime: '最近7天',
        pieTime: '最近7天',
        tableTime: '最近7天',
        listQuery: {
          ad_id: '',
          start: '',
          end: ''
        },
        line_chart_pick_date: '',
        pie_chart_pick_date: '',
        table_pick_date: '',
        ad_type: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          }
        },
        group: '',
        btnAdAdd: false
      }
    },
    created() {
      const date = new Date()
      this.listQuery.start = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
      this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
      this.getPlanOption()
      this.btnList = this.$store.getters.buttons
      if (in_array('adAdd', this.btnList)) {
        this.btnAdAdd = true
      }
    },
    methods: {
      getPlanOption: async function() {
        await new Promise((resolve) => {
          getList().then(response => {
            if (response.code === 1) {
              this.planOptions = response.data
              if (this.planOptions) {
                this.listQuery.ad_id = this.planOptions[0].id
                this.getToday()
                this.getlineChart()
                this.getBarChart()
                this.getTableData()
              }
            }
          })
        })
      },
      handlePlanChange() {
        this.getToday()
        this.getlineChart()
        this.getBarChart()
        this.getTableData()
      },
      handleCreateAd() {
        this.$router.push({ path: '/advertising/index' })
      },
      getToday() {
        getTodayData(this.listQuery).then(response => {
          if (response.code === 1) {
            this.todayData = response.data
          }
        })
      },
      getlineChart() {
        getLineChartData(this.listQuery).then(response => {
          if (response.code === 1) {
            const data = response.data.list
            if (response.data.ad_type === 1) {
              this.lineChartData.legend = ['曝光次数', '点击量', '点击率', '花费', '关注', '取消关注']
              this.lineChartData.xData = []
              this.lineChartData.pv = []
              this.lineChartData.click_count = []
              this.lineChartData.click_rate = []
              this.lineChartData.daily_price = []
              this.lineChartData.attend_count = []
              this.lineChartData.unattend_count = []
              for (const v of data) {
                this.lineChartData.xData.push(v.d_date)
                this.lineChartData.pv.push(v.pv)
                this.lineChartData.click_count.push(v.click_count)
                this.lineChartData.click_rate.push(v.click_rate)
                this.lineChartData.daily_price.push(v.daily_price)
                this.lineChartData.attend_count.push(v.attend_count)
                this.lineChartData.unattend_count.push(v.unattend_count)
              }
            } else if (response.data.ad_type === 2) {
              this.lineChartData.legend = ['曝光次数', '点击量', '点击率', '花费']
              this.lineChartData.xData = []
              this.lineChartData.pv = []
              this.lineChartData.click_count = []
              this.lineChartData.click_rate = []
              this.lineChartData.daily_price = []
              this.lineChartData.attend_count = []
              this.lineChartData.unattend_count = []
              for (const v of data) {
                this.lineChartData.xData.push(v.d_date)
                this.lineChartData.pv.push(v.pv)
                this.lineChartData.click_count.push(v.click_count)
                this.lineChartData.click_rate.push(v.click_rate)
                this.lineChartData.daily_price.push(v.daily_price)
              }
            }
          }
        })
      },
      getBarChart() {
        getBarChartData(this.listQuery).then(response => {
          if (response.code === 1) {
            const data = response.data
            if (typeof (data.attend_rate) === 'number' && typeof (data.unAttend_rate) === 'number') {
              this.barChartData.xData = ['广告展示', '广告点击', '关注', '取消关注']
            } else {
              this.barChartData.xData = ['广告展示', '广告点击']
            }
            this.barChartData.yData = []
            this.barChartData.yData.push(data.show)
            this.barChartData.yData.push(data.click_rate)
            this.barChartData.yData.push(data.attend_rate)
            this.barChartData.yData.push(data.unAttend_rate)
            // console.log(this.barChartData)
          }
        })
      },
      getTableData() {
        getLineChartData(this.listQuery).then(response => {
          if (response.code === 1) {
            this.ad_type = response.data.ad_type
            this.list = response.data.list
          }
        })
      },
      handlelineChartDatePickChange() {
        if (this.line_chart_pick_date) {
          this.lineTime = ''
          this.listQuery.start = parseTime(new Date(this.line_chart_pick_date[0]), '{y}-{m}-{d}')
          this.listQuery.end = parseTime(new Date(this.line_chart_pick_date[1]), '{y}-{m}-{d}')
          this.getlineChart()
        }
      },
      handleLineTimeChange() {
        this.line_chart_pick_date = ''
        const date = new Date()
        switch (this.lineTime) {
          case '7':
            this.listQuery.start = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
          case '15':
            this.listQuery.start = parseTime(new Date(date - 14 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
          case '30':
            this.listQuery.start = parseTime(new Date(date - 29 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
        }
        this.getlineChart()
      },
      handlePieChartDatePickChange() {
        if (this.pie_chart_pick_date) {
          this.pieTime = ''
          this.listQuery.start = parseTime(new Date(this.pie_chart_pick_date[0]), '{y}-{m}-{d}')
          this.listQuery.end = parseTime(new Date(this.pie_chart_pick_date[1]), '{y}-{m}-{d}')
          this.getBarChart()
        }
      },
      handlePieTimeChange() {
        this.pie_chart_pick_date = ''
        const date = new Date()
        switch (this.pieTime) {
          case '7':
            this.listQuery.start = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
          case '15':
            this.listQuery.start = parseTime(new Date(date - 14 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
          case '30':
            this.listQuery.start = parseTime(new Date(date - 29 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
        }
        this.getBarChart()
      },
      handleTableDatePickChange() {
        if (this.table_pick_date) {
          this.tableTime = ''
          this.listQuery.start = parseTime(new Date(this.table_pick_date[0]), '{y}-{m}-{d}')
          this.listQuery.end = parseTime(new Date(this.table_pick_date[1]), '{y}-{m}-{d}')
          this.getTableData()
        }
      },
      handleTableTimeChange() {
        this.table_pick_date = ''
        const date = new Date()
        switch (this.tableTime) {
          case '7':
            this.listQuery.start = parseTime(new Date(date - 6 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
          case '15':
            this.listQuery.start = parseTime(new Date(date - 14 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
          case '30':
            this.listQuery.start = parseTime(new Date(date - 29 * 24 * 3600 * 1000), '{y}-{m}-{d}')
            this.listQuery.end = parseTime(date, '{y}-{m}-{d}')
            break
        }
        this.getTableData()
      }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
